<template>
  <div class="top-bar-wrapper">
    <div class="tob-lang">
      <img src="@/assets/img_11.png" alt="" class="logo">
      <div class="lang-box" @click="setLang">
        <img src="@/assets/img_12.png" alt="" class="lange">
        {{ $t('language.name') }}
      </div>
    </div>
    <div class="top-bar">
      <div class="top-bar-btns" @click="fanhui">
        <img src="@/assets/img_01.png" alt="" class="return" />
        {{ $t('common.txt54') }}
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    setLang() {
      if (this.$t('language.name') == 'English') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'zh'
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.top-bar-wrapper {
  position: sticky;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;

  .tob-lang {
    padding: 0 .4rem;
    height: 1.33rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;

    .logo {
      width: 2.36rem;
      height: .4rem;
    }

    .lang-box {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #505050;

      .lange {
        margin-right: .11rem;
        width: .4rem;
        height: .4rem;
      }
    }
  }

  .top-bar {
    width: 100%;
    height: 1.33rem;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: #1f4456;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: .4rem;
    padding-right: .4rem;
    .top-bar-btns {
      display: flex;
      align-items: center;
      color: #fff;

      .return {
        width: .27rem;
        height: .49rem;
        object-fit: contain;
        margin-right: .21rem;
      }
    }
  }
}
</style>